<template>
  <div class="tenement_sixth">
    <Header title="项目信息管理" @del="del" @add="add" />
      <!-- 点新增导入组件并渲染 -->

    <div class="main">
      <div class="nav">
        <div class="kuang">
          <el-form class="form">
            <div class="left">
              <span>项目名称：</span>
              <el-input placeholder="请输入项目名称"/>
            </div>
            <div class="center">
              <span>设备编号：</span>
              <el-input placeholder="请输入项目编号"/>
            </div>
            <div class="right">
              <span>运行状态：</span>
              <el-select placeholder="请选择">
                <el-option label="已验收" value="" />
                <el-option label="建设中" value="" />
                <el-option label="已冻结" value="" />
              </el-select>
            </div>
            <div class="btns">
              <el-button type="success" class="chaxun">查询</el-button>
              <el-button type="info" plain>重置</el-button>
            </div>
          </el-form>
        </div>
      </div>
      <div class="tableBox">
        <!--
          data 传入表格的数据
          定义@check接收单选事件
          定义@checkAll接收多选事件
          keys传入表格数据每一个键的数组
          label传入表头
          <template #status> 正常 </template>//该插槽里写状态，没有则不写
          <template #btn> <button>详细</button> </template> //该插槽里写操作里的按钮
        -->
        <Table
          :data="tableData"
          @check="check"
          @check-all="checkAll"
          :keys="[
            'flag',
            'name',
            'num',
            'XMtype',
            'address',
            'adminType',
            'status',
            'time',
          ]"
          :label="[
            '值',
            '项目名称',
            '项目编号',
            '项目类型',
            '项目地址',
            '用户类型',
            '项目状态',
            '预计上线时间',

          ]"
          :status="['status']">
          <template #status> 科技园区 </template>
          <template #btn> 
            <el-button @click="editer">详情</el-button>
            <el-popconfirm title="您确认删除这条内容嘛？">
              <template #reference>
                <el-button @click="delData">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </Table>
      </div>
    </div>
  </div>
</template>


<script setup lang="ts">
import { ref , onMounted } from "vue";
import Table from "@/components/common/MyTable.vue";
import Header from "@/components/common/MyHeader.vue";
import * as service from '../../../api/wc';


var tableData = ref([]);

// for (var i = 0; i < 5; i++) {
//   tableData.value.push({
//     flag: true,
//     name: "起梦忆灵科创园" + i,
//     num: "SNS826732",
//     XMtype: "软件集成",
//     address: "秋一路456号",
//     adminType: "科技园区",
//     statu: "建设中",
//     time: "2022-01-23",
//   });
// }


// 单选
var check = async (select, row) => {
  console.log(select, row);
  var res = await service.item_del({id:1})
  console.log(res);
};
// 全选
var checkAll = async (a) => {
  console.log(a);
  var res = await service.item_deleall({ids:88})
  console.log(res);
};

// 新增
var add = async () => {
  var res = await service.item_add({})
  console.log(res);
};

// 分页
onMounted( async ()=>{
  var res = await service.item_page({})
  console.log(res);
})

// 批量删除
var del = async () => {
  var res = await service.item_deleall({ids:'1'})
  console.log(res);
};

// 单删
var delData = async ()=>{
  var res = await service.item_del({id:'6'})
  console.log(res);
}

// 详情
var editer = async ()=>{
  var res = await service.item_edit({})
  console.log(res);
}

</script>


<style scoped lang="scss">
.tenement_sixth {
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    justify-content: space-between;
    height: 60px;
    background: #fff;
    align-items: center;
    padding: 0 10px;
    padding-right: 20px;
    margin-bottom: 10px;
    h3 {
      display: flex;
      height: 100%;
      margin-left: 30px;
      font-weight: 600;
      span {
        width: 8px;
        flex: 1;
        background: rgb(94, 128, 234);
        margin-right: 15px;
      }
    }
    .right {
      .add {
        margin-right: 20px;
      }
    }
  }
  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 0 20px;
    .nav {
      height: 200px;
      display: flex;
      flex-direction: column;
      .tab {
        height: 50px;
        line-height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;
        span {
          height: 100%;
          padding: 0 30px;
          font-size: 14px;
        }
        span:hover {
          color: green;
          border-bottom: 1px solid green;
        }
      }
      .kuang {
        flex: 1;
        padding: 30px 0;
        .form {
          border: 1px solid #999;
          border-radius: 8px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          > div {
            display: flex;
            flex: 2;
            margin: 0 20px;
            align-items: center;
            span {
              white-space: nowrap;
              font-size: 14px;
            }
          }
          .btns {
            flex: 1;
            display: flex;
            justify-content: right;
            .chaxun {
              margin-right: 30px;
            }
          }
        }
      }
    }
    .tableBox {
      flex: 1;
      .table {
        text-align: left;
        :deep(td),
        :deep(th) {
          font-weight: 400;
          border: 1px solid #eee;
          padding-left: 10px;
        }
      }
    }
  }
}
</style>

